<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
    <style>
        /* 网页背景颜色 */
        body {
            background-color: #f0f0f0; /* 浅灰色背景 */
        }

        /* 标题样式 */
        h1 {
            color: #2c3e50; /* 深灰色字体 */
            font-size: 36px; /* 字体大小 */
            text-align: center; /* 标题居中 */
        }

        /* 段落样式 */
        p {
            line-height: 1.8; /* 设置行高 */
            letter-spacing: 1px; /* 字间距 */
            font-size: 18px; /* 设置段落字体大小 */
            color: #34495e; /* 段落文字颜色 */
        }

        /* 图片样式 */
        img {
            border: 5px solid #3498db; /* 设置图片边框，颜色为蓝色 */
            border-radius: 10px; /* 设置圆角边框 */
            display: block; /* 图片为块级元素，居中显示 */
            margin: 20px auto; /* 图片居中并加上下边距 */
        }

        /* 超链接样式 */
        a {
            color: #2980b9; /* 默认颜色为蓝色 */
            text-decoration: none; /* 去掉下划线 */
            font-weight: bold; /* 加粗文本 */
        }

        /* 超链接悬停效果 */
        a:hover {
            background-color: #2980b9; /* 悬停时背景颜色 */
            color: white; /* 悬停时文字颜色 */
            padding: 5px 10px; /* 添加内边距，使背景更明显 */
            border-radius: 5px; /* 圆角效果 */
        }
    </style>
</head>
<body>
    <h1>我的第一个网页</h1>
    <p>你好，我是一个学习HTML的新手。这是我用HTML创建的第一个网页。</p>
    <p>本实验的目的是学习HTML的基本结构和常用标签，能够通过这些标签创建简单的静态网页。</p>
    <img src="1742996155132.jpg" alt="我的照片" width="300" height="200">
    <a href="https://www.gxstnu.edu.cn/">点击这里访问学校官网</a>
</body>
</html>
